//用户列表功能
$.ajax({
    type:'get',
    url:'/users',
    success:function(res){
        console.log(res)
        var html = template('usersTpl',{data:res})
        console.log(html)
        $('#usersBox').html(html)
    }
})

//用户头像上传功能
// 如果这块不用事件委托来写，只能对添加有效，对编辑无效
$('#modifyBox').on('change','#avatar',function(){
    // 非普通表单控件
    // FormData:只能用于非普通表单 第一个自动收集表单数据 第二个可以实现文件上传
    // 第二天下午视频再看一下
    var formData = new FormData()
    formData.append('avatar',this.files[0])
    $.ajax({
        type:'post',
        url:'/upload',
        data:formData,
        contentType: false,
        processData: false,
        success:function(res){
            // console.log(res)
            $('#preview').attr('src',res[0].avatar)
            $('#hiddenImg').val(res[0].avatar)
        }
    })
})

//添加用户功能
$('#userForm').submit(function(){
    // 收集表单数据
    var data = $(this).serialize()
    $.ajax({
        type:'post',
        url:'/users',
        data:data,
        success:function(){
            location.reload()
        }
    })
    return false;//阻止默认跳转行为
})


// 编辑功能
//在页面打开的时候，.edit类名的按钮还没有渲染出来
// 因为ajax是异步的
// console.log($('.edit').length)
// $('.edit').on('click',function(){
//     console.log(123)
// })

//编辑第一步、当用户点击要修改用户信息的时候，把用户信息展示到左侧表单中
$('#usersBox').on('click','.edit',function(){
    var id = $(this).attr('data-id');
    console.log(id)
    $.ajax({
        type:'get',
        url:'/users/'+id,
        success:function(res){
            console.log(res)
            var html = template('modifyTpl',res);
            console.log(html)
            $('#modifyBox').html(html)
        }
    })
})

// 编辑第二步、当用户提交表单的时候，我们收集表单数据，发送ajax
$('#modifyBox').on('submit','#modifyForm',function(){
    //收集表单数据
    var data = $(this).serialize()
    var id = $(this).attr('data-id');
    //发送ajax
    $.ajax({
        type:'put',
        url:'/users/'+id,
        data:data,
        success:function(res){
           location.reload();
        }
    })
    return false;
})



//实现删除功能
$('#usersBox').on('click','.delete',function(){
    var id = $(this).attr('data-id');
    // 删除是一件很危险的事情，需要向用户确认一下
    if(confirm('确定要删除吗?')){
        $.ajax({
            type:'delete',
            url:'/users/'+id,
            success:function(){
                location.reload()
            }
        })
    }
    
})

var deleteMany = $('#deleteMany');
//实现全选的效果
$('#selectAll').on('change',function(){
    var status = $(this).prop('checked');
    console.log(status)
    $('.userStatus').prop('checked',status)
    if(status){
        deleteMany.show()
    }else{
        deleteMany.hide()
    }
})

// 给tbody中所有的checkbox添加change事件
$('#usersBox').on('change','.userStatus',function(){
    if($('.userStatus').length == $('.userStatus:checked').length){
        $('#selectAll').prop('checked',true)
    }else{
        $('#selectAll').prop('checked',false)
    }
    //选中几个，批量删除按钮显示出来，这个要看产品经理 要看老板怎么说
    if($('.userStatus:checked').length > 1){
        deleteMany.show()
    }else{
        deleteMany.hide()
    }
})